<template>
  <div>
    <h1>{{ message }}</h1>
    <p v-if="visible">这是一段文字</p>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="toggle">切换</button>
    <div>{{doubleCount}}</div>
  </div>
</template>
<script setup >
import {
  ref,
  reactive,
  computed,
  watch,
  watchEffect,
  defineProps,
  defineEmits,
  onMounted,
  onUnmounted,
  toRefs,
} from "vue";
const props = defineProps({
  chartData: {
    type: Array,
    default: () => [],
  },
  color: {
    type: Array,
    default: () => ["#31bef3", "#235aff", "#f56b6b", "#3fffaa", "#ffeb69"],
  },
  total: {
    type: Number,
    default: () => 0,
  },
});
const emit = defineEmits(["chartClick"]);
const message = ref("Hello Vue 3 with <script setup>");
const visible = ref(true);
const items = ref(["Vue", "React", "Angular"]);
const list = reactive({
  count: 1,
  todos: [],
  user: {
    name: "John",
    age: 25,
    address: {
      city: "New York",
      zip: "10001",
    },
  },
  preferences: {
    theme: "dark",
    notifications: true,
  },
});
const counts = ref("10");
const { count } = toRefs(list);
const doubleCount = computed(() => list.count * 2);
const toggle = () => {
  visible.value = !visible.value;
  //   count.value = count.value * 10;
  list.count = list.count * 2;
};
watch(count, (newVal, oldVal) => {
  console.log(`count changed from ${oldVal} to ${newVal}`);
});
watch(
  list,
  (newVal, oldVal) => {
    console.log("complexObject 变化:", newVal, oldVal);
  },
  { deep: true }, // 启用深度监听
);
watchEffect(() => {
  console.log(77, list.count, visible.value);
});
watch(count, (newVal, oldVal) => {
  console.log("count changed:", oldVal, newVal);
});
</script>